<template>
    <div class="postmanagerPages">
        <pagetitle type="2"></pagetitle>
        <el-card class="pageCard">
            <div class="postmanagerTopTip">
                <img src="@/assets/images/icon/teamhand.png" alt="" srcset="" class="gangweiTipimg" />
                <div>
                    <div class="topTip">团队的组织架构，方便您团队的管理和决策</div>
                    <div class="bottomTip">团队信息仅用于进行登记，不会泄露您的任何证件信息</div>
                </div>
            </div>
        </el-card>
        <div class="cont">
            <div class="title">部门管理</div>
            <div class="center">
                <div class="left">
                    <el-input v-model="keyWords" class="input" placeholder="搜索成员、部门" clearable @input="searchData">
                        <template #prefix>
                            <el-icon class="el-input__icon"><search /></el-icon>
                        </template>
                    </el-input>
                    <div class="btns">
                        <div class="btn" @click="addOnedepartment">
                            <img src="@/assets/images/icon/t1.png" alt="" />
                            添加一级部门
                        </div>
                        <div class="btn" @click="addsubdepartment">
                            <img src="@/assets/images/icon/t2.png" alt="" />
                            添加子部门
                        </div>
                    </div>
                    <el-scrollbar class="leftscrollbar">
                        <!-- :expand-on-click-node="false" -->
                        <el-tree
                            v-if="treeIsShow"
                            :data="data.departmentData"
                            :props="treeProps"
                            :expand-on-click-node="false"
                            highlight-current
                            accordion
                            :default-expanded-keys="[menberQuery.departmentId]"
                            trigger="click"
                            node-key="departmentId"
                            ref="departmentTree"
                            @node-click="treeNodeClick"
                        >
                            <template #default="{ node, data }">
                                <div class="customtreenode">
                                    <span>{{ node.label }}</span>
                                    <el-dropdown class="btn" size="small" @command="handleCommand">
                                        <div class="btntext">···</div>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item :command="{ fun: 'update', node }">编辑部门信息</el-dropdown-item>
                                                <el-dropdown-item :command="{ fun: 'add', node }">添加子部门</el-dropdown-item>
                                                <el-dropdown-item :command="{ fun: 'moveUp', node }">上移</el-dropdown-item>
                                                <el-dropdown-item :command="{ fun: 'moveDown', node }">下移</el-dropdown-item>
                                                <el-dropdown-item :command="{ fun: 'delete', node }"><span style="color: #ff0000">删除</span></el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </div>
                            </template>
                        </el-tree>
                        <div v-else>
                            <div class="filtration" v-if="searchResult.department.length > 0">
                                <div class="name">部门</div>
                                <div class="list" :class="selectDepartment == item.departmentId ? 'department' : ''" v-for="(item, index) in searchResult.department" :key="index" @click="filtrationDepartmentClick(item)">
                                    {{ item.name }}
                                </div>
                            </div>
                            <div class="filtration" v-if="searchResult.member.length > 0">
                                <div class="name">成员</div>
                                <div class="list" v-for="(item, index) in searchResult.member" :key="index" @click="topages(`/team/teammanagement/menbermsg/${item.userId}?teamId=${selectCompany}&type=2`)">{{ item.userName }}</div>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
                <div class="right">
                    <div class="righttitle">
                        <div>
                            <div class="name">{{ userInfo.nickName }}</div>
                            <div class="nametip">您是主管理员(创建者), 拥有全部权力</div>
                        </div>
                        <sxnfbtn @click="addDepartmentMenbers">添加部门成员</sxnfbtn>
                        <!-- <el-button type="primary" text bg @click="addDepartmentMenbers">添加部门成员</el-button> -->
                    </div>
                    <div class="tableBox">
                        <el-table :data="menberData.list" style="width: 100%" class="configurationtable" border>
                            <el-table-column prop="name" label="序号" width="50">
                                <template #default="scope">
                                    {{ scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="userName" label="成员名称" width="200">
                                <template #default="scope">
                                    {{ scope.row.userName }}
                                    <el-tag size="small" style="margin-left: 10px" v-if="scope.row.isManager == 2">管理员</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="positionName" label="岗位" width="200"></el-table-column>
                            <el-table-column prop="description" label="岗位描述"></el-table-column>
                            <el-table-column label="操作" width="180">
                                <template #default="scope">
                                    <el-button type="primary" size="small" v-if="scope.row.isManager != 2" link @click="menberHanlder(1, scope.row)">设为主管</el-button>
                                    <el-button type="primary" size="small" v-else link @click="menberHanlder(3, scope.row)">取消主管</el-button>
                                    <el-button type="primary" size="small" link @click="topages(`/team/teammanagement/menbermsg/${scope.row.userId}?teamId=${selectCompany}&type=2`)">查看</el-button>
                                    <el-button type="danger" size="small" link @click="menberHanlder(2, scope.row)">移除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <pagination :totalNum="menberData.total" @paginaClick="paginaClick"></pagination>
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加部门 -->
        <el-drawer v-model="drawer" :show-close="false" modal-class="teamdrawer">
            <div class="drawerheader">
                <span>{{ data.departmentHandle == "add" ? (data.creationData.parentId ? "添加子部门" : "添加部门") : "修改部门" }}</span>
                <el-icon class="teamdrawerclose" @click="drawer = false"><Close /></el-icon>
            </div>
            <div class="drawerbody">
                <div class="item">
                    <div class="itemname">部门名称：</div>
                    <el-input v-model="data.creationData.name" placeholder="请输入部门名称" />
                </div>
                <div class="item" v-if="data.creationData.parentId">
                    <div class="itemname">上级部门：</div>
                    <el-cascader style="width: 100%" ref="elcascader_department" v-model="data.creationData.parentId" :options="data.departmentData" :props="props1" @change="cascaderChange" />
                </div>
                <div class="item" v-else>
                    <div class="itemname">所属团队：</div>
                    <el-input v-model="teamNames" disabled placeholder="请输入上级部门" />
                </div>
                <div class="item">
                    <div class="itemname">排序：</div>
                    <el-input v-model="data.creationData.seq" placeholder="请输入上级部门" />
                </div>
                <div class="item">
                    <div class="itemname">部门主管：</div>
                    <el-select v-model="data.creationData.managerId" class="itemselect" placeholder="请选择部门主管">
                        <el-option v-for="item in menberList" :label="item.userName" :value="item.userId" />
                    </el-select>
                    <div class="itemtip">*设置为部门管理员该用户自动加入新部门</div>
                </div>
                <!-- <el-image class="drawerimg" :src="require('@/assets/image/drawer1.png')" fit="contain"></el-image> -->
                <el-image class="drawerimg" :src="require('@/assets/image/drawer2.png')" fit="contain"></el-image>
            </div>
            <template #footer>
                <div class="drawerFooter">
                    <sxnfbtn @click="drawer = false">取消</sxnfbtn>
                    <sxnfbtn @click="onHandleDepartment">确定</sxnfbtn>
                    <!-- <el-button text bg @click="drawer = false">取消</el-button>
                    <el-button text bg @click="onHandleDepartment">确定</el-button> -->
                </div>
            </template>
        </el-drawer>
        <!-- 添加部门成员列表 -->
        <el-dialog v-model="menberlistbox" title="添加部门成员" width="945px">
            <!-- <el-input v-model="menberQuery.keyWords" class="menberlistboxsearch" @input="getDepartmentMenberList(1)" placeholder="搜索用户">
                <template #suffix>
                    <el-icon class="el-input__icon" @click="getDepartmentMenberList(1)"><search /></el-icon>
                </template>
            </el-input> -->
            <template #header="{ close, titleId, titleClass }">
                <div class="dialogheader">
                    <h4 :id="titleId" :class="titleClass">添加部门成员</h4>
                    <el-input v-model="menberQuery.keyWords" class="menberlistboxsearch" @input="getMenberList(1)" placeholder="搜索用户、部门、岗位">
                        <template #suffix>
                            <el-icon class="el-input__icon" @click="getMenberList(1)"><search /></el-icon>
                        </template>
                    </el-input>
                </div>
            </template>
            <el-table :data="allMenberData.list" style="width: 100%" class="configurationtable" border>
                <el-table-column prop="name" label="序号" width="50">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="姓名" width="110"></el-table-column>
                <el-table-column prop="phoneNum" label="联系电话" width="110"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
                <el-table-column prop="departmentName" label="部门"></el-table-column>
                <el-table-column prop="positionName" label="岗位"></el-table-column>
                <el-table-column prop="name" label="资质技能"></el-table-column>
                <el-table-column label="操作" width="58">
                    <template #default="scope">
                        <el-button type="primary" size="small" link @click="menberAddToDepartment(scope.row)">添加</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :totalNum="allMenberData.total" @paginaClick="paginaClick1"></pagination>
        </el-dialog>
        <!-- 添加部门成员 -->
        <el-dialog v-model="dialogVisible" title="添加部门成员" width="520px">
            <el-form label-width="70px" :model="pageData">
                <el-form-item label="姓名：">
                    <el-input v-model="pageData.name" disabled class="dialoginput" />
                </el-form-item>
                <el-form-item label="岗位：">
                    <el-select v-model="pageData.positionId" class="dialoginput" placeholder="请选择岗位" @change="positionIdChange">
                        <el-option v-for="item in pageData.postList" :key="item.positionId" :label="item.name" :value="item.positionId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="描述：">
                    <el-input v-model="pageData.positionDescribe" disabled :rows="6" resize="none" class="dialoginput" type="textarea" placeholder="描述" />
                </el-form-item>
                <el-form-item label="">
                    <sxnfbtn @click="addMenbers" class="dialoginput" color="#23b14d">确定</sxnfbtn>
                    <!-- <el-button type="primary" class="dialoginput" text bg @click="addMenbers">确定</el-button> -->
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, computed, reactive, watch, nextTick } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
import {
    departmentList,
    creationDepartment,
    deleteDepartment,
    updateDepartment,
    getDepartmentMenbers,
    getPosition,
    setMenberToDepartment,
    getTeamMenber,
    setDepartmentManager,
    setDepartmentRemove,
    departmentMoveUp,
    departmentMoveDown,
    departmentCancelManager,
} from "@/api/team";
// import { number } from "echarts";

const store = useStore();
const router = useRouter();
const userInfo: any = computed((e: any) => {
    return store.getters.userInfo;
});
// 创建一级部门获取当前团队名称
const teamNames = computed((e: any) => {
    let list = store.getters.teamList;
    let selectId = store.getters.mainTeamId;
    let text = "11";
    list.forEach((v: any) => {
        if (v.teamId == selectId) {
            text = v.teamName;
        }
    });
    return text;
});
const topages = (url: string) => {
    router.push(url);
};
// 搜索框关键字
const keyWords = ref("");
const treeIsShow = ref(true);
const searchResult: any = reactive({
    department: [],
    member: [],
});
const drawer = ref(false);
const menberlistbox = ref(false);
const dialogVisible = ref(false);
const menberData = reactive({
    list: [],
    total: 0,
});
const allMenberData = reactive({
    list: [],
    total: 0,
    pageNum: 1,
});
const treeProps = {
    label: "name",
};
const props1 = {
    checkStrictly: true,
    label: "name",
    value: "departmentId",
    emitPath: false,
};

// aaa.value = 2;
// 页面数据
const data: any = reactive({
    departmentData: [],
    creationData: {
        name: "",
        managerId: "",
        managerName: "",
        parentId: "",
        seq: 0,
        teamId: store.getters.mainTeamId,
        createUser: "",
        // departmentName: "",
    },
    departmentHandle: "add",
});
const departmentTree: any = ref(null);
// 获取部门列表
const getDepartmentList = () => {
    departmentList(store.getters.mainTeamId, keyWords.value).then((res: any) => {
        if (keyWords.value) {
            searchResult.department = res.data;

            getDepartmentMenberList(1);
        } else {
            data.departmentData = res.data;
            nextTick(() => {
                if (res.data.length > 0) {
                    console.log(menberQuery.departmentId);
                    if (!menberQuery.departmentId) {
                        departmentTree?.value.setCurrentKey(res.data[0].departmentId);
                        menberQuery.departmentId = res.data[0].departmentId;
                    } else {
                        departmentTree?.value.setCurrentKey(menberQuery.departmentId);
                    }

                    menberQuery.pageNum = 1;
                    getDepartmentMenberList();
                }
            });
        }
    });
};
getDepartmentList();
// 搜索数据
const searchData = () => {
    if (keyWords.value) {
        treeIsShow.value = false;
    } else {
        treeIsShow.value = true;
    }
    getDepartmentList();
    menberQuery.departmentId = "";
    menberQuery.keyWords = keyWords.value;
    // getDepartmentMenberList(1);
};
const selectDepartment = ref("");
// 搜索成功后部门点击事件
const filtrationDepartmentClick = (item: any) => {
    console.log(item);
    // 获取部门员工列表
    selectDepartment.value = item.departmentId;
    menberQuery.departmentId = item.departmentId;
    menberQuery.keyWords = "";
    getDepartmentMenberList(1);
};
// 获取部门员工
const menberQuery = reactive({
    pageNum: 1,
    pageSize: 10,
    teamId: store.getters.mainTeamId,
    departmentId: "",
    keyWords: keyWords.value,
    isRemove: 1,
});
const getDepartmentMenberList = (pageNum?: any) => {
    menberQuery.pageNum = pageNum ? pageNum : menberQuery.pageNum;
    // console.log(menberQuery, keyWords.value);
    menberData.list = [];
    getDepartmentMenbers(menberQuery).then((res: any) => {
        if (menberQuery.keyWords) {
            searchResult.member = res.data.list;
        } else {
            if (menberQuery.departmentId) {
                menberData.list = res.data.list;
                menberData.total = res.data.total;
            }
        }
    });
};
// 获取添加成员列表
const menberLists = reactive({
    pageNum: 1,
    pageSize: 10,
    teamId: store.getters.mainTeamId,
    departmentId: "",
    keyWords: "",
    isRemove: "",
});
const getMenberList = (pageNum?: any) => {
    menberLists.pageNum = pageNum ? pageNum : menberLists.pageNum;
    getDepartmentMenbers(menberLists).then((res: any) => {
        allMenberData.list = res.data.list;
        allMenberData.total = res.data.total;
        allMenberData.pageNum = res.data.pages;
    });
};
const paginaClick = (val: number) => {
    getDepartmentMenberList(val);
};
watch(dialogVisible, (val: boolean) => {
    if (!val) {
        let departmentId = "";
        try {
            departmentId = departmentTree?.value.getCurrentKey();
        } catch (error) {
            departmentId = selectDepartment.value;
        }
        menberQuery.departmentId = departmentId;
        getDepartmentMenberList();
    }
    getMenberList();
});
// 树菜单点击事件
const treeNodeClick = (node: any) => {
    // console.log(node.departmentId);
    menberQuery.departmentId = node.departmentId;
    menberQuery.pageNum = 1;
    getDepartmentMenberList();
};
// 打开添加成员的列表弹窗
const addDepartmentMenbers = () => {
    menberQuery.keyWords = "";
    menberQuery.departmentId = "";
    menberlistbox.value = true;
    getMenberList();
};

const paginaClick1 = (val: number) => {
    getMenberList(val);
};
// 成员列表添加按钮
const pageData: any = reactive({
    teamId: store.getters.mainTeamId,
    userId: "",
    name: "",
    positionId: "",
    positionDescribe: "",
    postList: [],
});

const menberAddToDepartment = (row: any) => {
    // console.log(row);
    // return;
    // console.log(row, departmentTree?.value.getCurrentKey());
    pageData.userId = row.userId;
    pageData.name = row.userName;
    // pageData.positionId = departmentTree?.value.getCurrentKey();
    departmentPostList();
    dialogVisible.value = true;
};
const positionIdChange = () => {
    console.log(pageData);
    pageData.postList.forEach((v: any) => {
        if (v.positionId == pageData.positionId) {
            pageData.positionDescribe = v.description;
        }
    });
};
// 获取部门下的岗位
const departmentPostList = () => {
    let departmentId = "";
    try {
        departmentId = departmentTree?.value.getCurrentKey();
    } catch (error) {
        departmentId = selectDepartment.value;
    }
    getPosition({
        departmentId: departmentId,
        teamId: store.getters.mainTeamId,
    }).then((res: any) => {
        pageData.postList = res.data;
        pageData.positionDescribe = res.data.length > 0 ? res.data[0].description : "";
        pageData.positionId = res.data.length > 0 ? res.data[0].positionId : "";
    });
};
// 添加员工到部门
const addMenbers = () => {
    if (!pageData.positionId) {
        ElMessage.error("请选择要分配的岗位");
        return;
    }
    setMenberToDepartment(pageData).then((res: any) => {
        ElMessage.success("添加成功");
        dialogVisible.value = false;
        let pages: number = 1;
        if (allMenberData.pageNum > 1) {
            if (allMenberData.list.length == 1) {
                pages = allMenberData.pageNum -= 1;
            } else {
                pages = allMenberData.pageNum;
            }
        }
        paginaClick1(pages);
        // menberQuery.departmentId = departmentTree?.value.getCurrentKey();
        // getDepartmentMenberList();
    });
};
// 监听头部公司选择框数据变化
const selectCompany = computed({
    get: () => {
        return store.getters.mainTeamId;
    },
    set: (val) => {
        console.log(val);
    },
});
watch(
    selectCompany,
    (newVal, oldVal) => {
        if (oldVal) {
            getDepartmentList();
        }
    },
    { immediate: true, deep: true }
);
// 新建修改删除得到的部门父级数据
interface command {
    fun?: string;
    node?: any;
}
const handleCommand = (command: command) => {
    let datas: any = command.node.data;
    data.departmentHandle = command.fun;
    if (command.fun == "delete") {
        // 删除
        onDeleteDepartment(datas.departmentId);
    } else {
        if (command.fun == "add") {
            data.creationData.name = "";
            data.creationData.parentId = datas.departmentId;
            drawer.value = true;
            // data.creationData.departmentName = datas.name;
        }
        if (command.fun == "update") {
            data.creationData.name = datas.name;
            data.creationData.parentId = datas.parentId;
            data.creationData.seq = datas.seq;
            // data.creationData.departmentName = command.node.parent.data.name;
            data.creationData.departmentId = datas.departmentId;
            drawer.value = true;
        }
        // <el-dropdown-item :command="{ fun: 'moveUp', node }">上移</el-dropdown-item>
        // <el-dropdown-item :command="{ fun: 'moveDown', node }">下移</el-dropdown-item>
        if (command.fun == "moveUp") {
            // 上移
            departmentMoveUp({
                departmentId: datas.departmentId,
                teamId: store.getters.mainTeamId,
            }).then((res) => {
                ElMessage.success("操作成功");
                getDepartmentList();
            });
        }
        if (command.fun == "moveDown") {
            // 下移
            departmentMoveDown({
                departmentId: datas.departmentId,
                teamId: store.getters.mainTeamId,
            }).then((res) => {
                ElMessage.success("操作成功");
                getDepartmentList();
            });
        }
    }
};
// 创建-修改部门
const onHandleDepartment = () => {
    if (data.departmentHandle == "add") {
        creationDepartment(data.creationData).then((res: any) => {
            ElMessage({
                message: "创建成功",
                type: "success",
            });
            drawer.value = false;
            getDepartmentList();
        });
    } else {
        updateDepartment(data.creationData).then((res: any) => {
            ElMessage({
                message: "修改成功",
                type: "success",
            });
            drawer.value = false;
            getDepartmentList();
        });
    }
};
// 删除部门
const onDeleteDepartment = (id: number | string) => {
    ElMessageBox.confirm("是否要删除该部门?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        deleteDepartment({
            id,
            teamId: store.getters.mainTeamId,
        }).then((res: any) => {
            ElMessage({
                message: "删除成功",
                type: "success",
            });
            getDepartmentList();
        });
    });
};
// 添加一级部门
const addOnedepartment = () => {
    data.departmentHandle = "add";
    data.creationData.name = "";
    data.creationData.parentId = "";
    drawer.value = true;
};
// 添加子部门
const addsubdepartment = () => {
    data.departmentHandle = "add";
    try {
        let node = departmentTree?.value.getCurrentNode();
        // console.log(node);
        data.creationData.name = "";
        data.creationData.parentId = node.departmentId;
        drawer.value = true;
    } catch (error) {
        ElMessage.error("请先添加一级部门");
    }
};
// 成员设置为部门主管和删除成员
const menberHanlder = (type: number, row: any) => {
    let tipText = "";
    if (type == 1) {
        tipText = `确定要设置${row.userName}为管理员吗?`;
    } else if (type == 2) {
        tipText = `确定要移除成员${row.userName}吗?`;
    } else if (type == 3) {
        tipText = `确定要移除成员${row.userName}管理员资格吗?`;
    }
    ElMessageBox.confirm(tipText, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        const data = {
            userId: Number(row.userId),
            teamId: Number(row.teamId),
            positionId: Number(row.positionId),
        };
        if (type == 1) {
            // 设置管理员
            setDepartmentManager(data).then((res) => {
                ElMessage({
                    message: "操作成功",
                    type: "success",
                });
                getDepartmentMenberList();
            });
        }
        if (type == 2) {
            // 移出成员
            setDepartmentRemove(data).then((res) => {
                ElMessage({
                    message: "操作成功",
                    type: "success",
                });
                if (menberQuery.pageNum > 1 && allMenberData.list.length == 1) {
                    menberQuery.pageNum -= 1;
                }
                getDepartmentMenberList();
            });
        }
        if (type == 3) {
            // 取消管理员
            departmentCancelManager(data).then((res) => {
                ElMessage({
                    message: "操作成功",
                    type: "success",
                });
                getDepartmentMenberList();
            });
        }
    });
};
// 获取团队成员用于设置部门主管
const menberList: any = ref([]);
const getMenbers = () => {
    getTeamMenber(store.getters.mainTeamId, {
        pageNum: 1,
        pageSize: 100,
    }).then((res: any) => {
        // console.log(res.data.list, 1111111);
        menberList.value = res.data.list;
    });
};
getMenbers();
const elcascader_department: any = ref(null);
const cascaderChange = () => {
    elcascader_department?.value.togglePopperVisible();
};
</script>
<style lang="scss" scoped>
.postmanagerPages {
    .pageCard {
        margin-bottom: 20px;
        .postmanagerTopTip {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .gangweiTipimg {
                width: 56px;
                height: 56px;
                margin-right: 25px;
            }
            .topTip {
                font-size: 16px;
                color: #333333;
                span {
                    color: #23b14d;
                    margin-left: 10px;
                    cursor: pointer;
                }
            }
            .bottomTip {
                font-size: 14px;
                color: #666666;
                margin-top: 10px;
            }
        }
    }
    .cont {
        // box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        background: #ffffff;
        .title {
            padding: 20px;
            border-bottom: 1px solid #eeeeee;
            position: relative;
            &::before {
                content: "";
                position: absolute;
                width: 62px;
                height: 2px;
                background: #333333;
                left: 20px;
                bottom: 0;
            }
        }
        .center {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            .left {
                height: 765px;
                width: 320px;
                border-right: 1px solid #eeeeee;
                // padding: 15px 20px;
                .input {
                    margin: 15px 20px;
                    margin-bottom: 15px;
                    width: calc(100% - 40px);
                    .el-input__icon {
                        cursor: pointer;
                    }
                }
                .btns {
                    margin: 0 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 15px;
                    .btn {
                        width: 119px;
                        height: 34px;
                        border-radius: 4px 4px 4px 4px;
                        border: 1px solid #eaeced;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 12px;
                        color: #333333;
                        cursor: pointer;
                        position: relative;
                        &:first-child {
                            &::after {
                                content: "";
                                position: absolute;
                                width: 1px;
                                height: 22px;
                                background: #eaeced;
                                top: 50%;
                                transform: translateY(-50%);
                                right: -21px;
                            }
                        }
                        &:hover {
                            background-color: rgba(35, 177, 77, 0.1);
                        }
                        img {
                            margin-right: 5px;
                            height: 16px;
                        }
                    }
                }
                .leftscrollbar {
                    height: calc(100% - 72px);
                    padding: 0 20px;
                    .filtration {
                        width: 100%;
                        margin-bottom: 20px;
                        font-size: 12px;
                        .name {
                            color: #999999;
                            padding-bottom: 10px;
                            border-bottom: 1px solid #dedede;
                            margin-bottom: 10px;
                        }
                        .list {
                            line-height: 32px;
                            cursor: pointer;
                            padding: 0 10px;
                            &:hover {
                                background: #e9f7ed;
                                color: #23b14d;
                            }
                        }
                        .department {
                            background: #e9f7ed;
                            color: #23b14d;
                        }
                    }
                }
                .customtreenode {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    padding-right: 10px;
                    &:hover {
                        .btn {
                            display: block;
                        }
                    }
                    .btn {
                        width: 22px;
                        height: 22px;
                        border-radius: 2px;
                        text-align: center;
                        line-height: 22px;
                        color: #666666;
                        background: rgba(0, 0, 0, 0.1);
                        // display: none;
                        .btntext {
                            width: 22px;
                        }
                    }
                }
            }
            .right {
                width: calc(100% - 320px);
                .righttitle {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    padding: 20px;
                    padding-bottom: 30px;
                    .name {
                        color: #333333;
                        font-size: 16px;
                        margin-bottom: 5px;
                        font-weight: bold;
                    }
                    .nametip {
                        color: #666666;
                        font-size: 14px;
                    }
                }
                .tableBox {
                    padding: 0 20px;
                    padding-bottom: 20px;
                }
            }
        }
    }
}
.teamdrawer {
    .drawerheader {
        color: #333333;
        font-size: 16px;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px 20px;
        border-bottom: 1px solid #eeeeee;
        .teamdrawerclose {
            cursor: pointer;
        }
    }
    .drawerbody {
        padding: 30px 20px;
        .item {
            margin-bottom: 30px;
            .itemname {
                color: #333333;
                font-size: 14px;
                margin-bottom: 10px;
            }
            .itemselect {
                width: 100%;
            }
            .itemtip {
                font-size: 12px;
                font-weight: 400;
                color: #999999;
                margin-top: 10px;
            }
        }
        .drawerimg {
            width: 378px;
            // height: 260px;
            margin-top: 60px;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }
    }
    .drawerFooter {
        border-top: 1px solid #eeeeee;
        padding: 20px;
    }
}
.dialoginput {
    width: 100%;
}

.dialogheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 30px;
    .menberlistboxsearch {
        // margin-bottom: 20px;
        width: 370px;
        .el-input__icon {
            cursor: pointer;
        }
    }
}
</style>

<style>
.postmanagerPages .leftscrollbar .el-tree-node.is-current.is-focusable > .el-tree-node__content {
    color: #23b14d;
}
</style>
